<!--目录编排-->
<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-page-header @back="goBack" content="目录编排"></el-page-header>
    </div>
    <div class="content-container">
      <el-tree
        :style="{ height: '90vh', overflow: 'auto',  }"
        :data="data"
        node-key="id"
        default-expand-all
        :allow-drop="allowDrop"
        draggable
        @node-drop="handleDrop"
      >
        <template slot-scope="scope">
          <span>
            <svg class="icon" aria-hidden="true">
              <use
                :xlink:href="iconType(scope.data.tag.fileExtension).class"
              ></use>
            </svg>
            {{ scope.data.label }}
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { listTreeFolder, updateMoveFolder } from '@/api/fd/folder'
import { updateMoveDocument } from '@/api/fd/document'
import { unity } from '@/styles/js/setIconType'

export default {
  name: 'directoryLayout',
  data() {
    return {
      iconType: unity.setIconType,
      data: []
    }
  },
  mounted() {
    console.log('111111111')
    this.getTreeList()
  },
  methods: {
    goBack() {
      // goBacks()
      this.$router.go(-1)
    },
    getTreeList() {
      this.dialogVisible = true
      listTreeFolder({ repositoryId: this.$route.params.repositoryId }).then(
        (res) => {
          this.data = res.data.data
        }
      )
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      var parentFolderId
      if (dropType === 'inner') {
        parentFolderId = dropNode.data.value
      } else {
        parentFolderId =
          dropNode.parent.data.value === undefined
            ? 0
            : dropNode.parent.data.value
      }
      if (draggingNode.data.move) {
        var data = {
          documentId: draggingNode.data.value,
          folderId: parentFolderId
        }
        updateMoveDocument(data).then((res) => {
          if (res.code === 1) {
            this.$message.success('更新成功')
          }
        })
      } else {
        var data = {
          folderId: draggingNode.data.value,
          folderName: draggingNode.data.label,
          parentFolderId: parentFolderId,
          repositoryId: this.$route.params.repositoryId
        }
        updateMoveFolder(data).then((res) => {
          if (res.code === 1) {
            this.$message.success('更新成功')
          }
        })
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.move === true) {
        return type !== 'inner'
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
</style>
